<template>
  <h1>当前鼠标在页面中的坐标：{{ x }} , {{ y }}</h1>
  <h1>sourceType==>{{ sourceType }}</h1>
  <h1>openId ==>{{ openId }}</h1>
  <h1>{{ formatted }}</h1>
  <button @click="url = 'http://bufantec.com/api/douban/movie/selectPreview'">精选预告</button>
  <button @click="url = 'http://bufantec.com/api/douban/movie/coming_soon'">电影-即将上映</button>
  <button @click="url = 'http://bufantec.com/api/douban/movie/in_theaters'">电影-正在热映</button>
  <button @click="url = 'http://bufantec.com/api/douban/movie/top250'">电影-top250</button>
  <div v-if="error">
    <p style="color:red">{{ error }}</p>
  </div>
  <div v-else-if="data">
    <p>数据加载成功</p>
    <pre>{{ data }}</pre>
  </div>
  <div v-else>
    加载中...
  </div>
</template>

<script setup>
import { ref } from 'vue'
// import {useMouse} from '@/compsites/move.js'
import { useMouse, useStorage, useNow, useDateFormat } from '@vueuse/core'
import { useFetch } from '@/compsites/fetch.js'
import axios from 'axios';
const url = ref('http://bufantec.com/api/douban/movie/selectPreview')
//  const {x,y} = useMouse()
const { x, y, sourceType } = useMouse()
const { error, data } = useFetch(url)
const openId = useStorage('openId', 'nihao')
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')

</script> 